<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 1200px;
            /* margin: 100px auto; */
            border: 1px solid red;
            transition: 0.5s linear;
        }

    </style>
</head>
<body>
    <div class="box">你好</div>
    <script>
        var box=document.querySelector(".box");
        box.onclick=function(e){
            console.log(e);
            this.style.backgroundColor="red";
            console.log("屏幕"+e.screenX,e.screenY);
            console.log("可视区"+e.clientX,e.clientY);
            console.log("可视区"+e.x,e.y);
            console.log("元素左上角"+e.offsetX,e.offsetY);
            console.log("网页"+e.pageX,e.pageY);
            console.log("定位"+e.layerX,e.layerY);
        

        }
        //事件对象的获取   A:参数获取   B:window.event || event[性质一样]
        
        //屏幕---------可视区[]-------网页-----元素-------坐标系
        //   clientXY XY   pageXY   offsetXY      layerXY


        //目标元素 srcElement  target   
        //type mouse{out|over  enter|leave   down|up  move click|dblclick contexMenue wheel select  }
        
    </script>



</body>
</html>